<!DOCTYPE html>
<html lang='zh-Hans'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <base href=''>
    <title>TestMonad</title>
    <style>
        .main {
            display: flex;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div class="main">
    <div class='container' id='root'>
    </div>
    <div class="input_part"></div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash-fp/0.10.4/lodash-fp.js"></script>
    <script type="module">
        import {IO, lodash, map} from './util.js'
        console.log("%cLoadTime: " + new Date().toLocaleString(), "color: blue;")
        localStorage.setItem("preferences", JSON.stringify({style: "width: 100px; height: 100px; border-radius: 50px; border: 1px solid blue;"}))

        window.lodash = lodash
        const {curry, flowRight} = lodash
        const join = (effect) => effect.unsafePerform()

        const log = function(x) {
            return new IO(function() {console.log(x); return x;})
        }
        const setStyle = curry(function(sel, props) {
            console.log("will set style:", props)
            return new IO(function() {return document.getElementById(sel).setAttribute("style", props.style)})
        }) 
        const getItem = function(key) {
            return new IO(function() {
                return localStorage.getItem(key)
            })
        }
        const applyPreference = _.flowRight(
            join, map(setStyle('root')), join, map(log), map(JSON.parse), getItem
        )
        applyPreference('preferences').unsafePerform()

        console.log("Analyse...")
        var step1 = _.flowRight(map(log), map(JSON.parse), getItem)
        console.log(step1('preferences').unsafePerform())
    </script>
</body>

</html>